import { Component } from "react";

export default class componentchild extends Component {
  constructor(props) {
    super(props);
    console.log(this.props.componentchild, "=========");
    this.state = {
      age: 18,
      title: this.props && this.props.componentchild,
    };
  }
  componentDidMount() {
    this.props.onRef(this);
  }
  //父组件调用子组件的方法
  childEvent(params) {
    alert("我是子组件方法");
    // console.log("我是子组件方法")
  }
  //子组件调用父组件的方法
  change = () => {
    console.log("123");
    this.props.callback('子组件传父组件的数据', this.state.age);
  };

  render() {
    return (
      <div>
        我是componentchild--- {this.state.title}
        <button onClick={this.change}>子组件中调用父组件</button>
      </div>
    );
  }
}

//子组件
// class Child extends Component {
//     componentDidMount(){
//         this.props.onRef(this)
//     }

//     childEvent = () => alert('我是子组件方法')

//     render() {
//         return (<div>我是子组件</div>)
//     }
// }

//子组件
// import React, {useImperativeHandle, forwardRef} from "react";

// let Child = (props, ref) => {

//   // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
//   useImperativeHandle(ref, () => ({
//     // changeVal 就是暴露给父组件的方法
//     changeVal: (newVal) => {
//       alert('调用了子组件的方法=>'+newVal)
//     }
//   }));

//   return (
//     <div>
//      我是子组件
//     </div>
//   );
// }

// Child = forwardRef(Child)

// export default Child;
